<template>
	<view class="center">
		<view class="logo" @click="goLogin">
			<!-- <image class="logo-img" :src="avatarUrl"></image> -->
			<view class="logo-title">
				<text class="uer-name">用户：{{ form.fullName ? form.fullName : '您未登录' }}</text>
				<text class="go-login-navigat-arrow navigat-arrow" v-if="user == null">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list" @click="accountManager()">
			<view class="center-list-item border-bottom">
				<view style="display: inline-block;width: 70%;">
					<uni-icons type="locked" size="34" color="#6BA8FD" style="margin-right: 2%;"></uni-icons>
					<text class="list-text">账号管理</text>
				</view>
				<view style="text-align: right;width: 30%; display: inline-block;"><text class="navigat-arrow">&#xe65e;</text></view>
			</view>
		</view>

		<view class="center-list"  @click="FaceRegister">
			<view class="center-list-item">
				<!-- <text class="list-icon">&#xe614;</text> -->
				<view style="display: inline-block;width: 70%;">
					<uni-icons type="info" size="34" color="#6BA8FD" style="margin-right: 2%;"></uni-icons>
					<text class="list-text">开通人脸识别登录</text>
				</view>
				<view style="text-align: right;width: 30%; display: inline-block;"><text class="navigat-arrow">&#xe65e;</text></view>
			</view>
		</view>
		<view class="center-list"  @click="delFaceRegister">
			<view class="center-list-item">
				<!-- <text class="list-icon">&#xe614;</text> -->
				<view style="display: inline-block;width: 70%;">
					<uni-icons type="info" size="34" color="#6BA8FD" style="margin-right: 2%;"></uni-icons>
					<text class="list-text">人脸识别删除</text>
				</view>
				<view style="text-align: right;width: 30%; display: inline-block;"><text class="navigat-arrow">&#xe65e;</text></view>
			</view>
		</view>
		
		<view class="center-list" @click="goToCheck()">
			<view class="center-list-item border-bottom">
				<view style="display: inline-block;width: 70%;">
					<uni-icons type="reload" size="34" color="#6BA8FD" style="margin-right: 2%;"></uni-icons>
					<text class="list-text">检查更新</text>
				</view>
				<view style="text-align: right;width: 30%; display: inline-block;"><text class="navigat-arrow">&#xe65e;</text></view>
			</view>
		</view>
		
		<view class="center-list"  @click="modal">
			<view class="center-list-item">
				<view style="width: 70%;display: inline-block;">
					<uni-icons type="minus" size="34" color="#6BA8FD" style="margin-right: 2%;"></uni-icons>
					<text class="list-text">退出登录</text>
				</view>
				<view style="text-align: right;width: 30%; display: inline-block;"><text class="navigat-arrow">&#xe65e;</text></view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniSection from '@/components/uni-section/uni-section.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
/////
import loginjs from '../../login.js';
import {
		mapState,
	} from 'vuex'
export default {
	computed: mapState([, 'baseUrl']),
	components: {
		uniIcons,
		uniSection,
		uniPopup
	},
	onShow() {
		//检测用户是否登录
		var uNameAndAuth = loginjs.checkLogin();
		//用户名和认证信息的组合
		if (uNameAndAuth == null) {
			return;
		}
		uNameAndAuth = uNameAndAuth.split('/');
		this.user = uNameAndAuth[0];
		this.Authorization = uNameAndAuth[1];
	},

	data() {
		return {
			type: '',
			iconType: ['success'],
			//当前登陆的用户
			user: null,
			//认证信息
			avatarUrl: '../../static/head.png',
			Authorization: null,
			iconClassList: [{
						name: 'minus',
						unicode: 'e410'
					},{
						name: 'locked',
						unicode: 'e506'
					},{
						name: 'info',
						unicode: 'e504'
					}],
			form:{},
		};
	},
	// star
	onLoad() {
		// #ifdef MP-BAIDU
		this.iconType = [
			'success',
			'info',
			'warn',
			'waiting',
			'success_no_circle',
			'clear',
			'search',
			'personal',
			'setting',
			'top',
			'close',
			'cancel',
			'download',
			'checkboxSelected',
			'radioSelected',
			'radioUnselect'
		];
		// #endif
	},
	//end
	methods: {
		onReady() {
			//从本地存储中获取用户id
			/* */
			//检测用户是否登录
			var uNameAndAuth = loginjs.checkLogin()
			//用户名和认证信息的组合
			if (uNameAndAuth == null) {
				return
			}
			uNameAndAuth = uNameAndAuth.split("/")
			this.user = uNameAndAuth[0]
			this.Authorization = uNameAndAuth[1]
			this.uid = uni.getStorageSync("jaUserId");
			/* 根据用户id查询用户信息并回显 */
			this.getUserDetail()
		},
		//提示框
		modal() {
			var that = this
			uni.showModal({
				title: '提示',
				content: '你确定退出登录？',
				success: function(res) {
					if (res.confirm) {
						that.logOut();
					} else if (res.cancel) {
					}
				}
			});
		},//end
		getUserDetail() {
			uni.request({
				url: this.baseUrl + "api/system/sysUser/" + this.uid,
				method: "GET",
				header: {
					"Authorization": this.Authorization,
				},
				success: (res) => {
					if (res.data.code == 200) {
						this.form = res.data.data
					} else {
						uni.showToast({
							title: "获取用户信息失败",
							icon: "none",
							duration: 2000
						})
					}
				},
				fail() {
					uni.showToast({
						title: "获取用户信息失败",
						icon: "none",
						duration: 2000
					})
				}
			})
		},
		goLogin() {
			//console.log("点击登陆")
			if (this.user == null) {
				//保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({
					//跳转登录页面
					url: '../login/login'
				});
			} else {
				return;
			}
		},
		logOut() {
			//退出当前用户
			//把本地存储中的用户remove
			uni.clearStorage();
			uni.clearStorageSync();
			uni.removeStorageSync('jaloginName');
			uni.removeStorageSync('jaAuthorization');
			this.user = null;
			if (this.user == null) {
				// 保留当前页面uni.navigateTo
				//不保留当前页面，跳转到应用内的某个页面uni.redirectTo
				uni.redirectTo({
					//跳转登录页面
					url: '../login/login'
				});
			} else {
				return;
			}
		},
		accountManager() {
			//账号管理跳转至账号信息修改页
			uni.navigateTo({
				url: 'acount'
			});
		},
		goToCheck() {
			//跳转至检查更新
			uni.navigateTo({url:'./checkUpdate'})
		},
		FaceRegister() {
			uni.navigateTo({
				url: '../login/index?type=1'
			});
		},
		delFaceRegister(){
			var _this=this
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗？',
				success: function(res) {
					if (res.confirm) {
						uni.request({
							url: _this.baseUrl + "api/face/faceDelete/" + uni.getStorageSync("jaUserId"),
							method: "DELETE",
							header: {
								"Authorization": uni.getStorageSync("jaAuthorization"),
							},
							success: (res) => {
								console.log(res.data)
								if (res.data.code == 200) {
									uni.showToast({
										title: "删除成功",
										icon: "none",
										duration: 2000
									})
								} else {
									uni.showToast({
										title: "删除失败",
										icon: "none",
										duration: 2000
									})
								}
							},
							fail() {
								uni.showToast({
									title: "删除失败",
									icon: "none",
									duration: 2000
								})
							}
						})
					} else if (res.cancel) {
					}
				}
			});
			
		}
		
	}, /* methods结束 */
	onBackPress() {
		this.$refs['showpopup'].close();
		this.$refs['showtip'].close();
		this.$refs['showimage'].close();
		this.$refs['showshare'].close();
	},
	
};
</script>

<style>
/* #ifndef APP-PLUS-NVUE */
@font-face {
	font-family: texticons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/text-icon.ttf') format('truetype');
}

page {
	background-color: #f8f8f8;
}

/* #endif*/

/* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */
/* #ifdef MP-TOUTIAO */
text :not(view) {
	font-family: texticons;
}

/* #endif */

.center {
	flex: 1;
	flex-direction: column;
	background-color: #f8f8f8;
}

.logo {
	/* width: 700upx; */
	/* width: 100%; */
	height: 150upx;
	padding: 20upx;
	background-color: #2f85fc;
	flex-direction: row;
	align-items: center;
}

.logo-hover {
	opacity: 0.8;
}

.logo-img {
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
	position: relative;
}

.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	font-size:150%;
}

.go-login-navigat-arrow {
	font-size: 38upx;
	color: #ffffff;
}

.login-title {
	height: 150upx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: 20upx;
}

.center-list {
	flex-direction: column;
	background-color: #ffffff;
	margin-top: 20upx;
	/* width: 750upx; */
}

.center-list-item {
	height: 90upx;
	/* width: 750upx; */
	flex-direction: row;
	padding: 0upx 20upx;
}

.border-bottom {
	border-bottom-width: 1upx;
	border-color: #c8c7cc;
	border-bottom-style: solid;
}

.list-icon {
	width: 40upx;
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #2f85fc;
	text-align: center;
	font-family: texticons;
	margin-right: 20upx;
}

.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	flex: 1;
}

.navigat-arrow {
	height: 90upx;
	width: 40upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	text-align: right;
	font-family: texticons;
}

.logOut button {
	margin-top: 100upx;
}
</style>
<style>
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 28rpx;
	line-height: inherit;
}

.example {
	padding: 0 30rpx 30rpx;
}

.example-info {
	padding: 30rpx;
	color: #3b4144;
	background: #ffffff;
}

.example-body {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14rpx;
	background-color: #ffffff;
}

/* #endif */
.example {
	padding: 0 30rpx;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 30rpx;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 30rpx;
}

.example-info-text {
	font-size: 28rpx;
	line-height: 36rpx;
}

.example-body {
	flex-direction: column;
	padding: 30rpx;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #ffffff;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007aff;
}

.word-btn--hover {
	background-color: #4ca2ff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 5px 15px;
}

.button {
	flex: 1;
	margin: 10px 0;
}

.popup-content {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	background-color: #fff;
	padding: 15px;
	font-size: 14px;
}

/* 提示窗口 */
.uni-tip {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	padding: 15px;

	background-color: #fff;
	border-radius: 10px;
}

.uni-tip-title {
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	color: #333;
}

.uni-tip-content {
	/* padding: 15px;*/
	font-size: 14px;
	color: #666;
}

.uni-tip-group-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	margin-top: 20px;
}

.uni-tip-button {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}
</style>
